/*
  头像裁切
*/
$(function () {
  // 初始化图片裁切区域
  // $('.cropper-box > img').cropper({
  //   // 控制裁切区域的长宽比例
  //   aspectRatio: 1,
  //   // 指定裁切图片的预览区域
  //   preview: '.img-preview'
  // })
  // -----------------------------
  // 如果一个变量名称首字母如果是$,一般表示他的值是一个jQuery实例对象
  var $img = $('.cropper-box > img')
  var options = {
    // 控制裁切区域的长宽比例
    aspectRatio: 1,
    // 指定裁切图片的预览区域
    preview: '.img-preview'
  }
  $img.cropper(options)

  // 监听上传按钮的点击事件
  $('#select-img').click(function () {
    // 点击按钮，要求打开文件选中窗口
    $('#myfile').click()
  })

  // 如何获取选中的图片信息
  $('#myfile').change(function (e) {
    // 获取选中的所有文件
    var files = e.target.files
    // 把获取的文件信息更新到页面的背景中
    // 如何把file文件放到图片的src之中？
    // 根据选中的文件生成一个预览图片地址
    var newImgURL = URL.createObjectURL(files[0])
    // 接下来需要删除之前的裁切区域，然后更新图片，然后重新生成裁切区
    $img.cropper('destroy')    // 销毁旧的裁剪区域
      .attr('src', newImgURL)  // 重新设置图片路径
      .cropper(options)        // 重新初始化裁剪区域
  })

  // 实现图片的裁切功能
  $('#crop-img').click(function () {
    // 把选区裁切成图片，并且上传给服务器
    var dataURL = $img
      // 创建一个 Canvas 画布
      .cropper('getCroppedCanvas', { 
        width: 100,
        height: 100
      })
      // 将 Canvas 画布上的内容，转化为 base64 格式的字符串
      .toDataURL('image/png')     
    // 把裁切的base64格式的图片数据上传给服务器
    $.ajax({
      type: 'post',
      url: 'my/update/avatar',
      data: {
        avatar: dataURL
      },
      success: function (res) {
        layer.msg(res.message)
        // 重新加载顶部的头像图片
        // parent表示父窗口，这是原生BOM对象
        parent.loadUserInfo()
      }
    })
  })
})